<template>
    <el-menu default-active="2" class="el-menu-vertical" :collapse="isCollapse" @open="handleOpen" @close="handleClose" router="true">

        <div @click="openOrclose()" class="opendiv">
            <div v-show="isCollapse">
                <el-icon :size="20">
                    <Fold />
                </el-icon>
            </div>
            <div v-show="!isCollapse">
                <el-icon :size="20">
                    <Expand />
                </el-icon>
            </div>
        </div>
        <el-scrollbar>
            <template v-for="(item, index) in sideMenu">
                <el-menu-item :index="item.url" v-if="item.subMenu == undefined">
                    <el-icon><icon-menu /></el-icon>
                    <template #title>{{ item.name }}</template>
                </el-menu-item>

                <el-sub-menu  v-if="item.subMenu != undefined">
                    
                    <template #title>
                         <el-icon v-show="item.icon != undefined || item.svgsrc != undefined">
                            <component :is="item.icon" v-show="item.icon != undefined" />
                            <img class="el-icon" :src="item.svgsrc" v-show="item.svgsrc != undefined" />
                        </el-icon>
                        <span v-show="!isCollapse">{{ item.name }}</span>
                    </template>

                    <el-menu-item-group>
                        <el-menu-item :index="subitem.url" v-for="(subitem, subindex) in item.subMenu">
                            <el-icon v-show="item.icon != undefined || item.svgsrc != undefined">
                                <component :is="subitem.icon" v-show="subitem.icon != undefined" />
                                <img class="el-icon" :src="subitem.svgsrc" v-show="subitem.svgsrc != undefined" />
                            </el-icon>
                            {{ subitem.name }}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-sub-menu>

            </template>
        </el-scrollbar>
    </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { sideMenu } from '@/tools/data.js'
import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'


const isCollapse = ref(false)

function openOrclose() {
    isCollapse.value = !isCollapse.value
}

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>

<style>
.el-menu-vertical {
    display: flex;
    overflow: hidden;
    flex-direction: column;
}

.el-menu-vertical:not(.el-menu--collapse) {
    width: 200px;
}

.opendiv {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 25px;
    border-bottom: #ddd 1px solid;
}

.el-tooltip__trigger .el-sub-menu__icon-arrow{
    display: none;
}

</style>
